<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>土地利用——中东欧统计数据库</title>
    <!-- 引入Jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <!-- 引入Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <!-- 引入BootStrap-table -->
    <link rel="stylesheet" href="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.css">
    <script src="../assets/libs/bootstrap-table-master/dist/bootstrap-table.min.js"></script>

    <!-- 引入Bootstrap-paginator -->
    <script src="../assets/libs/bootstrap-paginator-master/build/bootstrap-paginator.min.js"></script>

    <!-- 引入Echarts -->
    <script src="../assets/libs/echarts/echarts.min.js"></script>

    <!-- 引入组装数据的Js -->
    <script src="../assets/libs/utils/general-data.js"></script>
</head>
<body>
    <div class="container">
        <div>
            <ul class="nav nav-tabs">
                <li role="presentation" id="tableTag"><a href="javascript:;" onclick="showTable()">&nbsp;<span class="glyphicon glyphicon-th-large"></span>&nbsp;</a></li>
                <li role="presentation" id="imageTag"><a href="javascript:;" onclick="showImage()">&nbsp;<span class="glyphicon glyphicon-tasks"></span>&nbsp;</a></li>
            </ul>
        </div>

        <div id="tableView">
            <div class="page-header" style="text-align: center;">
                <h3>土地利用</h3>
                <br>
                <h4 style="margin-top: -20px;">Land Utilization</h4>
            </div>

            <div style="text-align: right;">单位:&nbsp;万公顷</div>

            <table id="tableData" class="table table-hover table-striped"></table>
        </div>

        <div id="imageView">
            <div class="page-header" style="text-align: center;visibility: hidden;" id="imageTitle">
                <h3>土地利用</h3>
                <br>
                <h4 style="margin-top: -20px;">Land Utilization</h4>
            </div>

            <div class="panel" style="margin-top: 1.5em;">
                <div id="main" style="width: 100%;height:400px;">

                </div>
            </div>
        </div>

        <div style="color: #959595; margin-top: 1.5em;">*此数据仅展现最近五年，若需全部数据请点击&nbsp;<a href="#" class="btn btn-info btn-xs">
            <span class="glyphicon glyphicon-save"></span> 下载
        </a></div>
    </div>
    <script>
        var remoteData = getRemoteData('/overall/json.do?info=LandUtilization');
        //var remoteData={"maxLength":3,"existYear":false,"countryCount":16,"fieldCount":2,"fieldName":["areaType","measure"],"countries":{"立陶宛":[{"areaType":"陆地","country":"立陶宛","id":25,"measure":6267500.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"立陶宛","id":26,"measure":2290500.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"立陶宛","id":27,"measure":2180000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"波黑":[{"areaType":"陆地","country":"波黑","id":46,"measure":5120000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"波黑","id":47,"measure":1010000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"波黑","id":48,"measure":2185000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"克罗地亚":[{"areaType":"陆地","country":"克罗地亚","id":19,"measure":5596000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"克罗地亚","id":20,"measure":876400.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"克罗地亚","id":21,"measure":1922000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"保加利亚":[{"areaType":"陆地","country":"保加利亚","id":7,"measure":1.0856E7,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"保加利亚","id":8,"measure":3479000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"保加利亚","id":9,"measure":3823000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"斯洛伐克":[{"areaType":"陆地","country":"斯洛伐克","id":37,"measure":4808800.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"斯洛伐克","id":38,"measure":1394000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"斯洛伐克","id":39,"measure":1940000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"罗马尼亚":[{"areaType":"陆地","country":"罗马尼亚","id":28,"measure":2.3003E7,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"罗马尼亚","id":29,"measure":8746000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"罗马尼亚","id":30,"measure":6861000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"斯洛文尼亚":[{"areaType":"陆地","country":"斯洛文尼亚","id":40,"measure":2014000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"斯洛文尼亚","id":41,"measure":174100.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"斯洛文尼亚","id":42,"measure":1248000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"捷克":[{"areaType":"陆地","country":"捷克","id":16,"measure":7723000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"捷克","id":17,"measure":3149000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"捷克","id":18,"measure":2667000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"马其顿":[{"areaType":"陆地","country":"马其顿","id":31,"measure":2522000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"马其顿","id":32,"measure":413000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"马其顿","id":33,"measure":998000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"拉脱维亚":[{"areaType":"陆地","country":"拉脱维亚","id":22,"measure":6219000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"拉脱维亚","id":23,"measure":1208000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"拉脱维亚","id":24,"measure":3356000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"匈牙利":[{"areaType":"陆地","country":"匈牙利","id":43,"measure":9053000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"匈牙利","id":44,"measure":4403000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"匈牙利","id":45,"measure":2069000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"阿尔巴尼亚":[{"areaType":"陆地","country":"阿尔巴尼亚","id":1,"measure":2740000.0,"sort":1,"updated":"2018-02-20 00:00:00"},{"areaType":"耕地","country":"阿尔巴尼亚","id":2,"measure":617100.0,"sort":2,"updated":"2018-02-20 00:00:00"},{"areaType":"森林","country":"阿尔巴尼亚","id":3,"measure":771500.0,"sort":3,"updated":"2018-02-20 00:00:00"}],"塞尔维亚":[{"areaType":"陆地","country":"塞尔维亚","id":34,"measure":8746000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"塞尔维亚","id":35,"measure":3299000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"塞尔维亚","id":36,"measure":2720000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"波兰":[{"areaType":"陆地","country":"波兰","id":10,"measure":3.0621E7,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"波兰","id":11,"measure":1.0792E7,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"波兰","id":12,"measure":9435000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"爱沙尼亚":[{"areaType":"陆地","country":"爱沙尼亚","id":4,"measure":4239000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"爱沙尼亚","id":5,"measure":632000.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"爱沙尼亚","id":6,"measure":2232000.0,"sort":3,"updated":"2018-02-22 00:00:00"}],"黑山":[{"areaType":"陆地","country":"黑山","id":13,"measure":1345000.0,"sort":1,"updated":"2018-02-22 00:00:00"},{"areaType":"耕地","country":"黑山","id":14,"measure":7800.0,"sort":2,"updated":"2018-02-22 00:00:00"},{"areaType":"森林","country":"黑山","id":15,"measure":827000.0,"sort":3,"updated":"2018-02-22 00:00:00"}]}};
        initPic(remoteData);
        setTableData(remoteData,$('#tableData'));
          $(function() {
            $('#imageView').hide();
            $('#tableTag').attr('class', 'active');
          })

          function showTable() {
              $('#tableView').show();
              $('#imageView').hide();
              $('#imageTitle').css('visibility','hidden');
              $('#tableTag').attr('class', 'active');
              $('#imageTag').removeClass('active');
          }

          function showImage() {
              $('#imageView').show();
              $('#imageTitle').css('visibility','visible');
              $('#tableView').hide();
              $('#imageTag').attr('class', 'active');
              $('#tableTag').removeClass('active');
          }
        //初始化图
        function initPic(data) {
            var option = {
                //timeline基本配置都写在baseoption 中
                baseOption: {
                    timeline: {
                        loop: true,
                        axisType: 'category',
                        show: false,
                        autoPlay: true,
                        playInterval: 1000,
                        data: setYears(data)
                    },
                    legend: {
                        data: setLegend(data)
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    title:{
                        subtext:'数据来源'
                    },
                    calculable: true,
                    grid: {
                        y: 100,
                        y2: 100
                    },
                    xAxis: [{
                        type: 'category',
                        axisLabel: {                        interval:0,                        rotate:40                    },                    data: setCountries(data)
                    }],
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle:{
                                color:'#0066CC'
                            }
                        }
                    },
                    series: setSeriesTitle(data)
                },
                options:setOptions(data)
            };
            var myChart = echarts.init(document.getElementById('main'));
            myChart.setOption(option);
        }

    </script>
</body>
</html>
